/**
 * 添加或者修改页面
 */
var TaoHelpInfoDlg = {
    data: {
        id: "",
        content: "",
        pics: "",
        crateTime: ""
    }
};

layui.use(['form', 'admin', 'ax', 'upload' ], function () {
    var $ = layui.jquery;
    var $ax = layui.ax;
    var form = layui.form;
    var admin = layui.admin;
    var upload = layui.upload;

    var _index=1;
    var newPathList=[];
    //让当前iframe弹层高度适应
    admin.iframeAuto();

    //表单提交事件
    form.on('submit(btnSubmit)', function (data) {
        var ajax = new $ax(Feng.ctxPath + "/taoHelp/addItem", function (data) {
            Feng.success("添加成功！");
            window.location.href = Feng.ctxPath + '/taoHelp'
        }, function (data) {
            Feng.error("添加失败！" + data.responseJSON.message)
        });
        ajax.set(data.field);
        ajax.start();

        return false;
    });

    //返回按钮
    $("#backupPage").click(function () {
        window.location.href = Feng.ctxPath + '/taoHelp'
    });


    /**
     * 上传图片
     */
    upload.render({
        elem: '#bill_pic'
        , url: Feng.ctxPath + '/taoHelp/multipleGraph'
        , multiple: true
        , accept: 'file'
        , before: function (obj) {

            obj.preview(function (index, file, result) {

                $('#demo2').append(
                    '<div id="" class="file-iteme">' +
                    '<img style="width: 30%" src="' + result + '" alt="' + file.name + '" class="layui-upload-img">' +
                    '<div class="handle"><span class="layui-icon layui-icon-delete"></span></div>' +
                    '<div><input type="number" name="changeIndex" class="changeIndex" data-index="'+_index+'" data-key="'+_index+'" style="max-width: 70px;margin: 40px auto;" placeholder="请输入对应图片的排序序号"/></div>' +
                    '</div>'
                );
                _index++;
                $('.changeIndex').each(function (e){
                    $(this).val($(this).attr('data-index'))
                })
            });
        }
        , done: function (res) {
            console.log(res.data);
            //上传完毕
            layer.msg(res.message);
            $("#pics").val(res.data);

        },
        error: function (res) {
            layer.msg(res.message);
        }
    });


// 删除图片
    $(document).on("click", "#deleteBillpic", function (event) {
        $("#demo2").html("")
        $("#pics").val("");
        _index=1;
    }).on("change", ".changeIndex", function (event) {
        //现在输入的序号，
        var val=$(this).val();
         console.log(val)
        //原来的序号的序号，
         var valIndex=$(this).attr('data-index');
        console.log(valIndex)
        if(val>$('.changeIndex').length){
            $(this).val($('.changeIndex').length)
        }
        if(val<1){
            $(this).val(1);
        }
         //吧输入的新序号和对应位置序号调换
        $('.changeIndex').each(function (e){
            //如果输入的值和原来的序号对应
            if($(this).attr('data-index')==val){
                $(this).val(valIndex);//对应的序号框改变值
                $(this).attr('data-index',valIndex);//原来的序号的序号也需要改变
                changeIndexPath();
            }
            //
            // if(e+1==val){
            //
            // }
        })
        //改变对应的原来的序号的序号
        $(this).attr('data-index',val);
    });
   var changeIndexPath =function () {
       //获取所有的图片地址；
       var allPath= $("#pics").val().split(',');


       //$('.changeIndex')的下标对应的图片地址的下标；
       $("input[name='changeIndex']").each(function (e){
           let newIndex=parseInt($(this).val())-1;
           let oldPath=parseInt($(this).attr('data-key'))-1;//最初的排列标示
           newPathList[newIndex]=allPath[oldPath]

       })
       let new_path='';
       newPathList.forEach(function (item,index) {
           new_path+=item+",";
       })
       console.log(newPathList);
       console.log(new_path);
       $("#pics").val(new_path);
   }



});
